<template>
    <div class="note-menu pt-3">
        <!-- 顶层目录 -->
        <div class="list iconfont">
            <div class="pl-2 item  text-secondary shadow  bg-white "
            @click="onshowDialogue"
            >
                <span class=" add-notebook add-notebook-icon" 
                style="color: grey !important;"
                >新建笔记目录</span>
            </div>
            <div class="nameOfBook"
                @click="defenceCheckBook($event)"
            >
                <div class="pl-2 item bookName text-secondary"
                    
                    v-for="(item , index) in menu.list"  :key="index"
                    :data-index="index"
                >
                    <span :data-index="index" class="item-name">{{item.title}}</span>
                    <span :data-index="index" class="suffix iconfont suffix-menu">
                        <div class="dropMenu rounded ">
                            <div  class="dropMenu-item "
                            :data-index="index"
                            @click.stop="rmOneOfTopDir( $event )"
                            >
                                删除
                            </div>
                        </div>

                    </span>
                    
                </div>
                <div 
                v-if="menu.moreBtn"
                class="moreDataBtn text-secondary"
                @click="getMoreBook"
                >   
                    <span>加载更多</span> 
                    <div 
                    v-if="moreLoading"
                    class="spinner-border mr-2" role="status"
                    style="width: 1em; height: 1em;"
                    >
                        <span class="sr-only">Loading...</span>
                    </div>
                       
                </div>
            </div>
            
        </div>

      
    </div>
</template>

<script>
import { freshToken } from "../../../../../api/interface/token.js";
import { userTopdirUpadata } from "../../../../../api/interface/filesystem.js";

//工具模块
import { tools } from "../../../../../api/tools.js"; 

export default {
    
    data(){
        return {
            menu:{
                list:[],
                pageSize: 10,
                moreBtn: true
            },
            moreLoading: false,

        };
    },
    inject:['setAddTopDirLoading', 'noteAgent'],
    methods:{
        onshowDialogue(){
            
            this.$emit("onshow");
        },
        //使用防抖控制笔记本选择
        defenceCheckBook: tools.debounceWithTrigger_events( function(e){
            
            this.checkBook(e);
        } , 660 , true),
        checkBook( e ){
            if(!e.target.dataset.index) return ;
            let index =parseInt( e.target.dataset.index );
            let item = this.menu.list[index];
            this.$store.commit("setCurrentItem", item);
            let note = this.noteAgent();
            let { ...addPageIndex } = item;
            addPageIndex.pageIndex = 1; //当前归属页码
            this.$store.commit("setMenuPath",  addPageIndex); 
            let target = this.$store.getters.getEndOfPathOfNotebookItem;
            note.$refs.exploreFile.fatchData( target );
            // let { ...addPageIndex } = item;
            // addPageIndex.pageIndex = 1; //当前归属页码
            // this.$store.commit("setMenuPath", item);
        },
        setTopdir( item , fn ){
            this.setAddTopDirLoading(true);
            let that = this;
            // let list = this.menu.list.slice();
            //     list.push(item);
            //设置顶级目录
            userTopdirUpadata({
                TopDirContent: item
            }).then(res=>{
                
                that.menu.list.push(item);
                item.top_id = res.data.data.insertId;
                // that.$emit("CurrentItem", item);
                this.setAddTopDirLoading(false);
                
                fn();
            }).catch(err=>{
                this.$httpError.checkResStatus(err.data,function(){
                    
                    //重新请求生成token
                    freshToken().then(res=>{
                        
                        localStorage.setItem("token", res.data.data.token);
                        that.setTopdir( item , fn );
                    })
                },that);

                this.setAddTopDirLoading(false);
            });
            // this.menu.list.push( item );
        },
        //初始化顶层目录数据
        fatchData( offset , pageSize , fn){

            let that = this;
            let note = this.noteAgent();
            note.currentInnerPage = 1;
            this.$noteBook.getTopDirData( {
                offset,
                pageSize
            }).then(res=>{
                
                that.menu.list = res.data.data.data;
                
                if(that.menu.list.length > 0){
                    let currentItem = this.menu.list[0];
                    this.$emit("CurrentItem", currentItem ); //当前目录
                    let { ...addPageIndex } = currentItem;
                     addPageIndex.pageIndex = 1; //当前归属页码
                    this.$store.commit("setMenuPath",  addPageIndex); 
                    if( that.menu.list.length == res.data.data.total  ){
                        this.menu.moreBtn = false;
                    }
                    if( fn ){
                        fn(  );
                    }
                }
                
            }).catch(err=>{
                
                this.$httpError.checkResStatus(err.data,function(){
                    
                    //重新请求生成token
                    freshToken().then(res=>{
                        
                        localStorage.setItem("token", res.data.data.token);
                        that.fatchData( offset , pageSize );
                    })
                },that)
            });
        },
        //删除一个顶层目录
        rmOneOfTopDir( e ){
            
            let note = this.noteAgent();
            let index = parseInt( e.target.dataset.index );
            note.popup.rmDir = true;
            this.$store.commit("setRmItem", this.menu.list[index]);          
            
        },
        //获取更多数据
        fetchMoreData( offset , pageSize , fn ){
            let that = this;
            let note = this.noteAgent();
            note.currentInnerPage = 1;
            this.$noteBook.getTopDirData( {
                offset,
                pageSize
            }).then(res=>{
                console.log("顶层目录：", res);
                that.menu.list = that.menu.list.concat( res.data.data.data );
                
                if( fn ){
                    fn(res.data.data.total);
                }
                
                
            }).catch(err=>{
                
                this.$httpError.checkResStatus(err.data,function(){
                    
                    //重新请求生成token
                    freshToken().then(res=>{
                        
                        localStorage.setItem("token", res.data.data.token);
                        that.fatchData( offset , pageSize );
                    })
                },that)
            });
        },
        //获得更多笔记本
        getMoreBook(){
            let that = this;
            this.moreLoading = true;
            this.fetchMoreData( this.menu.list.length , this.menu.pageSize ,
            function( total ){
                that.moreLoading = false;
                console.log("len: ", total , that.menu.list.length);
                if( that.menu.list.length == total ){
                    that.menu.moreBtn = false; 
                }
            }
            );
        }
    },
    mounted(){
        //初始化笔记本数据
        this.fatchData( 0 , this.menu.pageSize );
    }
}
</script>

<style lang="scss">


.note-menu{
    padding: 0 .5em;
    margin-bottom: 5em;
}
.list{
    .item{
        margin: 0 auto; 
        font-size: 1em;
        line-height: 2em;
        text-align: left;
        position: relative;
        padding: 0 !important;
        z-index: 1;
        white-space: nowrap;
        .item-name{
            vertical-align: -.5em;
            text-overflow: ellipsis;
            overflow: hidden;
            display: inline-block;
            width: 60%;
        }
        .suffix{
            display: none;
            float: right;
            position: relative;
            line-height: 2.2em;
            
            .dropMenu{
                
                position: absolute;
                top: 2.2em;
                right: 0;
                background-color: white;
                z-index: 10;
                max-height: 0;
                overflow: hidden;
                border-bottom: 0px solid ;
                border-left: 1px solid ;
                border-right: 1px solid ;
                border-top: 0px solid ;
                border-top-right-radius: 0 !important;
                transition:  1s max-height;
                .dropMenu-item{
                    padding: 0 2em;
                    white-space: nowrap;
                    margin: .5em 0;
                }
                .dropMenu-item:hover{
                    background-color: #F5F5F5;
                    color:#0BB4F5;
                }
            }
        }
        
        
    }
    .item:hover{
        // border: 1px solid;
        background-color: #0BB4F5;
        color: white !important;
        .suffix{ //目录下拉目录
            display: inline-block;
            height: 100%;
            color: grey;
            
        }
        .suffix:hover .dropMenu{
            max-height: 100px;
            border-top: 1px solid ;
            border-bottom: 1px solid ;
            background-color: white;
            opacity: 1 !important;
        }
        
    }
    .item:hover + .item{
        position: relative;
        z-index: 0;
    }
    .item:hover + .item +.item{
        position: relative;
        z-index: 0;
    }
    
}

.moreDataBtn{
    background-color: #D3D3D3;
    text-align: center;
}

.bookName::before{
    content: "\e620"" ";
    font-size: 1.5em;
}
.add-notebook-icon::before{
    color: grey !important;
    display: inline-block;
    vertical-align: -2px;
}
</style>